<template>
  <div id="mine">
    <scroll :top-bounce="true" class="scroll">
      <user-info :user-info="userInfo"></user-info>
      <service-list :service-list="serviceList"></service-list>
    </scroll>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import UserInfo from '@/components/user-info/user-info.vue';
import ServiceList from './child/service-list/service-list.vue';
import { useState } from '@/hooks'
import Scroll from '@/components/scroll/scroll.vue'
export default defineComponent({
  props: {

  },
  components: {
    UserInfo,
    ServiceList,
    Scroll

  },
  data() {
    return {

    };
  },
  setup() {
    const userInfoState = useState(["userInfo"])
    const serviceListState = useState('mine',["serviceList"])
    return {
      ...userInfoState,
      ...serviceListState
      };

  }
})
</script>

<style scoped lang="less">
.scroll {
  position: absolute;
  top: 0;
  bottom: 16vw;
  left: 0;
  right: 0;
}
</style>
